<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.js" type="application/javascript"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
</head>
<body>

    <div id="app">
      <cp1 v-if="showCp1"></cp1>
        <button @click="showCp1=!showCp1"> 切换cp1组件的渲染 </button>
      <cp2></cp2>
    </div>

        
    
    <script>

        const  Bus = new Vue({});

        // 事件总线 EventBus
        // 一个独立的Vue 实例 使用 $on进行自定义事件的监听
        // 在一些老旧的项目当中我们可与通过 $on 和 $emit的配合来实现 跨组件的通讯
        Bus.$on('abc',(res)=>{
            console.log('abc 事件触发了',res)
        })
        Bus.$on('busGet',(val)=>console.log('busGet  事件触发了',val))
        
        Vue.component('cp1',{
            name:'cp1',
            template:`
                <div>
                    我是cp1组件
                    <button @click="fn1">fn1 in cp1</button>  
                    <h1> ct in cp1: {{ ct }}</h1> 
                </div>
            `,
            mounted(){
                Bus.$on('kfc',(arg)=>{
                    console.log('kfc事件触发')
                    this.ct = arg
                })
            },
            // 记得在 销毁的时候移除事件的监听
            beforeDestroy(){
                Bus.$off('kfc'); // 移除事件的监听
            },
            data(){
                return {
                    ct:0,
                    rcc:10
                }
            },
            methods:{
                fn1(){
                    // 通过 Vue实例的  $emit方法来触发一个指定的事件并传递参数 
                    Bus.$emit('abc',8888)
                    Bus.$emit('busGet',10086)
                    Bus.$emit('rccuol',this.rcc)
                    
                }
            } 
          
        })


        Vue.component('cp2',{
            name:'cp2',
            template:`
                <div>
                    我是cp2组件
                    <button @click="fn1">fn1 in cp2</button>  
                    <div v-if="wod !='' ">{{ wod }}</div>
                    <button @click="wod++">+++++</button>  
                    <div v-if="wod">????</div>
                </div>
            `,
            data(){
                return {
                    wod:''
                }
            },
            mounted(){
                Bus.$on('rccuol',(arg)=>{
                    console.log('将cp1的数据传递到cp2,rccuol的事件触发',arg)
                    this.wod = arg
                    console.log('this.wod触发',this.wod)
                })
            },
            // 记得在 销毁的时候移除事件的监听
            beforeDestroy(){
                Bus.$off('rccuol'); // 移除事件的监听
            },
            methods:{
                fn1(){
                   Bus.$emit('kfc',1000)
                }
            }
          
        })

        Vue.component('cp3',{
            name:'cp3',
            template:`
                <div>
                    我是cp3组件
                </div>
            `,
         
        })
    
        const app = new Vue({
            el: '#app',
            data:{
                curCp:'cp1',
                alives: [ ],
                showCp1: true
            }
        })

    </script>

</body>
</html>